<template>
	<view class="container">
		<view class="page-header">
			<text class="page-title">账户管理</text>
		</view>

		<view class="account-card">
			<view class="card-header">
				<image class="avatar" :src="userInfo.avatar || '/static/mine/default-avatar.png'" @click="updateAvatar">
				</image>
				<view class="avatar-edit">
					<text class="edit-icon">✎</text>
				</view>
			</view>

			<view class="card-info">
				<view class="info-row" @click="editUsername">
					<text class="info-label">姓名</text>
					<view class="info-value">
						<text>{{userInfo.username}}</text>
						<text class="arrow">></text>
					</view>
				</view>

				<view class="info-row">
					<text class="info-label">手机号</text>
					<view class="info-value">
						<text>{{formatPhone(userInfo.phone)}}</text>
						<text class="change-btn" @click="changePhone">更换</text>
					</view>
				</view>

				<view class="info-row" @click="editIdCard">
					<text class="info-label">身份证号</text>
					<view class="info-value">
						<text>{{formatIdCard(userInfo.idCard)}}</text>
						<text class="arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<view class="setting-list">
			<view class="setting-item" @click="goToPasswordSetting">
				<view class="setting-left">
					<image class="setting-icon" src="/static/mine/password.png"></image>
					<text class="setting-label">密码设置</text>
				</view>
				<text class="arrow">></text>
			</view>

			<view class="setting-item" @click="goToPrivacySetting">
				<view class="setting-left">
					<image class="setting-icon" src="/static/mine/privacy.png"></image>
					<text class="setting-label">隐私设置</text>
				</view>
				<text class="arrow">></text>
			</view>

			<view class="setting-item" @click="goToNotificationSetting">
				<view class="setting-left">
					<image class="setting-icon" src="/static/mine/notification.png"></image>
					<text class="setting-label">通知设置</text>
				</view>
				<text class="arrow">></text>
			</view>
		</view>

		<view class="danger-zone">
			<button class="logout-btn" @click="logout">退出登录</button>
			<button class="delete-btn" @click="showDeleteAccountConfirm">注销账户</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					username: '',
					phone: '',
					avatar: '',
					idCard: ''
				}
			}
		},
		onShow() {
			// 获取用户信息
			this.userInfo.username = uni.getStorageSync('username') || '未设置';
			this.userInfo.phone = uni.getStorageSync('telephone') || '未绑定';
			this.userInfo.avatar = uni.getStorageSync('avatar') || '';
			this.userInfo.idCard = uni.getStorageSync('idCard') || '';
		},
		methods: {
			updateAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];

						// 模拟上传头像
						uni.showLoading({
							title: '上传中...'
						});

						setTimeout(() => {
							uni.hideLoading();
							// 保存头像
							this.userInfo.avatar = tempFilePath;
							uni.setStorageSync('avatar', tempFilePath);

							uni.showToast({
								title: '头像更新成功',
								icon: 'success'
							});
						}, 1000);
					}
				});
			},
			editUsername() {
				uni.navigateTo({
					url: '/pages/mine/accountSetting/editUsername'
				});
			},
			changePhone() {
				uni.navigateTo({
					url: '/pages/mine/accountSetting/changePhone'
				});
			},
			editIdCard() {
				uni.navigateTo({
					url: '/pages/mine/accountSetting/editIdCard'
				});
			},
			goToPasswordSetting() {
				uni.navigateTo({
					url: '/pages/mine/accountSetting/password'
				});
			},
			goToPrivacySetting() {
				uni.navigateTo({
					url: '/pages/mine/accountSetting/privacy'
				});
			},
			goToNotificationSetting() {
				uni.navigateTo({
					url: '/pages/mine/accountSetting/notification'
				});
			},
			formatPhone(phone) {
				if (!phone || phone === '未绑定') return '未绑定';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			formatIdCard(idCard) {
				if (!idCard) return '未设置';
				return idCard.replace(/^(.{6}).*(.{4})$/, '$1********$2');
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录状态
							uni.removeStorageSync('token');

							// 返回登录页
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			},
			showDeleteAccountConfirm() {
				uni.showModal({
					title: '警告',
					content: '注销账户将删除您的所有数据，且无法恢复，确定要继续吗？',
					confirmColor: '#ff0000',
					success: (res) => {
						if (res.confirm) {
							this.confirmDeleteAccount();
						}
					}
				});
			},
			confirmDeleteAccount() {
				// 二次确认
				uni.showModal({
					title: '二次确认',
					content: '请再次确认是否注销账户？',
					confirmColor: '#ff0000',
					success: (res) => {
						if (res.confirm) {
							// 模拟账户注销流程
							uni.showLoading({
								title: '处理中...'
							});

							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: '账户已注销',
									icon: 'success'
								});

								// 清除所有存储
								uni.clearStorageSync();

								// 返回登录页
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/login/login'
									});
								}, 1500);
							}, 2000);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.page-header {
		padding: 20rpx 0 40rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.account-card {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.card-header {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 2rpx solid #f0f0f0;
	}

	.avatar-edit {
		position: absolute;
		right: 50%;
		bottom: 40rpx;
		margin-right: -70rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: #0086f6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.edit-icon {
		color: #fff;
		font-size: 24rpx;
	}

	.card-info {
		padding: 0 30rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-top: 1rpx solid #f0f0f0;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		display: flex;
		align-items: center;
	}

	.info-value text:first-child {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.change-btn {
		font-size: 24rpx;
		color: #0086f6;
		padding: 6rpx 15rpx;
		border: 1rpx solid #0086f6;
		border-radius: 20rpx;
	}

	.arrow {
		font-size: 36rpx;
		color: #999;
	}

	.setting-list {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.setting-item:last-child {
		border-bottom: none;
	}

	.setting-left {
		display: flex;
		align-items: center;
	}

	.setting-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.setting-label {
		font-size: 28rpx;
		color: #333;
	}

	.danger-zone {
		margin-top: 60rpx;
	}

	.logout-btn {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		color: #333;
		border-radius: 45rpx;
		font-size: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delete-btn {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		color: #ff5252;
		border-radius: 45rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>